<template>
  <div class="home">
    <div class="_box _top">
      <Header></Header>
    </div>
    <div class="_box carousel">
      <mu-carousel
        hide-controls
        style="height:100%;width:94%;margin:auto;border-radius:0.2rem;box-shadow:0 0.5vw 0.5vw #ccc"
        transition="fade"
        hide-indicators="true"
      >
        <mu-carousel-item v-for="item in carousel_img" :key="item.index">
          <img :src="item.img" />
        </mu-carousel-item>
      </mu-carousel>
    </div>
    <div class="_box showcase">
      <div class="_card">
        <div class="_items" v-for="item in showcase_data" :key="item.index">
          <span class="_icon">
            <svg aria-hidden="true" style="width:100%;height:100%">
                <use :xlink:href="item.icon"></use>
            </svg>
          </span>
          <span class="_title">
            {{item.title}}
          </span>
        </div>
      </div>
    </div>
    <div class="_box news">
      <div class="_left">
        <img src="static/imgs/b8.bmp" alt="">
      </div>
      <div class="_right">
        <div class="_items" style="height: 16%;" v-for="item in news_data" :key="item.index">
          <span class="_title" style="width:80%;display:block;float:left;">{{item.title}}</span>
          <div class="_sign" style="width:20%;float:left;">
            <mu-badge content="news" color="secondary"></mu-badge>
          </div>
        </div>
      </div>
    </div>
    <div class="_box showflow">
      <div class="_card">
        <div class="_title"></div>
        <div class="_list">
          <div class="_items" v-for="item in flow_data" :key="item.index">
            <div class="_img">
              <img :src="item.img" alt="">
            </div>
            <div class="_tag"></div>
            <div class="_hot">&nbsp 热力指数：<span style="color:#ff0000;font-size:1.8vh;">{{item.hot}}</span></div>
            <div class="_title">
              {{item.title}}
            </div>
            <div class="_msg">
              {{item.msg}}
            </div>
            <div class="_team">
              {{item.team}}
            </div>
          </div>
          
        </div>
        <div class="_fill"
            style="height:10vh;position: relative;width:100%;float:left;"
          >
        </div>
      </div>
    </div>
    <div class="_box _bottom">
      <Leader></Leader>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue'
import Leader from '../../components/leader.vue'
export default {
  name: 'home',
  data () {
    return {
      carousel_img: [
        { id: 1, img: 'static/imgs/b1.webp' },
        { id: 2, img: 'static/imgs/b2.webp' },
        { id: 3, img: 'static/imgs/b3.webp' },
        { id: 4, img: 'static/imgs/b4.webp' }
      ],
      showcase_data: [
        { icon: '#iconjinrongleiicontubiao-', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-1', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-2', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-11', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-10', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-18', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-25', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-27', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-5', title: 'xxx', link: '' },
        { icon: '#iconjinrongleiicontubiao-32', title: 'xxx', link: '' }
      ],
      news_data: [
        { msg: '', title: 'xxx', link: '' },
        { msg: '', title: 'xxx', link: '' },
        { msg: '', title: 'xxx', link: '' },
        { msg: '', title: 'xxx', link: '' },
        { msg: '', title: 'xxx', link: '' },
        { msg: '', title: 'xxx', link: '' }
      ],
      flow_data: [
        { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.5', link: '', img: 'static/imgs/q1.jpg' },
        { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.4', link: '', img: 'static/imgs/q2.jpg' },
        { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.3', link: '', img: 'static/imgs/3.jpg' },
        { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.3', link: '', img: 'static/imgs/q4.jpg' },
        { msg: 'xxx', title: 'xxx', team: 'xxx', tag: [], hot: '4.3', link: '', img: 'static/imgs/5.jpg' }
      ]
    }
  },
  components: {
    Header,
    Leader
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  width: 100%;
  overflow: auto;
}
._box {
  width: 100%;
}
._top {
  position: fixed;
  top: 0;
  z-index: 100;
}
._bottom {
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.carousel {
  width: 100%;
  height: 20%;
  position: relative;
  top: 8%;
  img{
    width: 100%;
    height: 100%;
  }
}
.news {
  width: 100%;
  height: 20%;
  position: relative;
  top: 10%;
}

.showcase {
  width: 100%;
  height: 15%;
  position: relative;
  top: 9%;
}
/* detail */
.showcase ._card {
  position: relative;
  margin: 0 auto;
  width: 80%;
  height: 100%;
}
.showcase ._card ._items {
  width: 20%;
  height: 50%;
  position: relative;
  float: left;
}
.showcase ._card ._items ._icon{
  width:100%;
  height: 70%;
  display: block;
}
.news ._left {
  position: relative;
  width: 30%;
  height: 100%;
  margin: 0 auto 0 3%;
  background: #eee;
  border-radius: 0.2rem;
  float: left;
  display:flex;
	align-items:center;
	justify-content:center;
  overflow: hidden;
  img{
    width: 100%;
    position: relative;
    height: 100%;
  }
}
.news ._right {
  position: relative;
  width: 60%;
  height: 100%;
  float: left;
  margin: 0 auto 0 2%;
}
.news ._right ._items {
  position: relative;
  float: left;
  width: 100%;
  border-bottom:0.02rem solid #ccc ;
}
.news ._right ._title{
  height: 100%;
}
.news ._right ._sign{
  height: 100%;
}
.showflow{
  position: relative;
  width: 100%;
  min-height: 30%;
  top: 11%;

}
.showflow ._card{
  width: 94%;
  margin: 0 auto;
}
.showflow ._list{
  width: 100%;
  -moz-column-count:2; /* Firefox */
  -webkit-column-count:2; /* Safari 和 Chrome */
  column-count:2;
  -moz-column-gap: 0.5em;
  -webkit-column-gap: 0.5em;
  column-gap: 0.5em;
}
.showflow ._items{
  width: 100%;
  min-height: 15vh;
  margin: 0.1rem auto;
  border-radius: 0.2rem;
  background: #fff;
  box-shadow: 0 0.02rem 0.05rem #ccc;
  position: relative;
  float: left;
  margin: 0.5vh 1%;
  overflow: hidden;
  font-size: 2vh;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  ._img{
    width: 100%;
    position: relative;
    align-items:center;
	  justify-content:center;
    img{
      width: 100%;
    }
  };
  ._hot{
    font-size: 1vh;
    text-align:left;
    width: 100%;
    height: 2vh;
    position: relative;
  }
  ._title{
    width: 100%;
    height: 4vh;
    position: relative;
    line-height: 4vh;
  }
  ._msg{
    width: 100%;

    position: relative;
  }
  ._team{
    width: 100%;
    height: 4vh;
    position: relative;
    line-height: 4vh;
  }
}
</style>
